<template>
    <div class="cloud-container">
        <van-nav-bar title="云圈" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

        <div class="card">
            <div class="card-header">
                <span>云村解忧杂货铺</span>
                <van-button size="small" round>+ 邀请好友</van-button>
            </div>
            <div class="card-content">
                <span>7.4万树洞信使</span>
                <span>5741人在线</span>
            </div>
        </div>

        <van-tabs v-model:active="active">
            <van-tab title="群聊">
                <div v-for="item in groupList" :key="item.id" class="group-item" @click="toChat(item)">
                    <van-image :src="item.avatar" round width="50" height="50" />
                    <div class="group-info">
                        <div class="group-name">{{ item.name }}</div>
                        <div class="group-message">{{ item.message }}</div>
                    </div>
                    <van-tag round type="danger">{{ item.unread }}</van-tag>
                </div>
            </van-tab>
            <van-tab title="圈内动态">
                <div class="empty-content">暂无动态</div>
            </van-tab>
            <van-tab title="匿名信箱">
                <div class="empty-content">暂无信箱</div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const active = ref(0);

const onClickLeft = () => {
    router.back();
};

const groupList = ref([
    {
        id: 1,
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: '解忧音乐安利🎵',
        message: '王科学Dr: 是今晚发新歌吗，好期待哦',
        unread: 64
    },
    {
        id: 2,
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: '说出自己的小秘密🤫',
        message: '森山: 好久不见',
        unread: 32
    },
    {
        id: 3,
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: '暗恋这件小事💕',
        message: '是你呀_本人: 你是我的森...本人: 你是我的光',
        unread: ''
    },
    {
        id: 4,
        avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
        name: '终于等到你✨',
        message: '一块苏皮糖: 这不得多听几遍?',
        unread: ''
    }
]);

const toChat = (item) => {
    router.push({ path: '/chat', query: { group: item.id } })
}

</script>

<style scoped>
.cloud-container {
    padding: 10px;
}

.card {
    background-color: #f3f3f3;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.card-header span {
    font-weight: bold;
    color: #222;
}

:deep(.dark) .card-header span {
    color: #fff !important;
}

.card-content span {
    font-size: 12px;
    color: #888;
    margin-right: 10px;
}

.group-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

.group-info {
    flex: 1;
    margin-left: 10px;
}

.group-name {
    font-weight: bold;
}

.group-message {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}

.empty-content {
    padding: 20px;
    text-align: center;
    color: #999;
}
</style>